<template>
  <view class="express-product">
    <!-- 名称 -->
    <view class="product">
      <view class="name">
        <view class="left">
          <view class="title">物品名称</view>
          <view class="title_sub color">必填</view>
        </view>
        <view class="value">{{ product }}</view>
      </view>
      <view class="list">
        <template v-for="(item, index) in nameList">
          <view class="item" :key="index" @click="selectProduct(item)" :class="{ 'active' : item === product  }">
            {{item}}
          </view>
        </template>
      </view>
    </view>
    <!-- 数量 -->
    <view class="quantity">
      <view class="title">包裹数量</view>
      <view class="title_sub color">必填</view>
      <view class="value">
        <view class="x"></view>
        <view class="k">
          <u--input
              placeholder="请输入内容"
              border="surround"
              v-model="quantity"
              :customStyle="{'height': '30rpx', 'background': 'white'}"
          ></u--input>
        </view>
        <view class="text">个</view>
      </view>
    </view>
    <!-- 重量 -->
    <view class="weight">
      <view class="left">
        <view class="title">物品预估重量</view>
        <view class="title_sub color">必填</view>
      </view>
      <view class="value">
        <view class="x"></view>
        <view class="k">
          <u--input
              placeholder="请输入内容"
              border="surround"
              v-model="weight"
              :customStyle="{'height': '30rpx', 'background': 'white'}"
          ></u--input>
        </view>
        <view class="text">KG</view>
      </view>
    </view>
    <!-- 体积 -->
    <view class="volume">
      <view class="left">
        <view class="title">预计体积(cm³)</view>
        <view class="title_sub">补充体积计算费用更准确</view>
      </view>
      <view class="property">
        <view class="col">
          <view class="text">长</view>
          <view class="k">
            <u--input
                border="surround"
                v-model="volume.length"
                placeholder="cm"
                type="number"
                :customStyle="{'height': '30rpx', 'width': '45rpx', 'background': 'white'}"
            ></u--input>
          </view>
        </view>
        <view class="x">x</view>
        <view class="col">
          <view class="text">宽</view>
          <view class="k">
            <u--input
                border="surround"
                v-model="volume.width"
                placeholder="cm"
                type="number"
                :customStyle="{'height': '30rpx', 'width': '45rpx', 'background': 'white'}"
            ></u--input>
          </view>
        </view>
        <view class="x">x</view>
        <view class="col">
          <view class="text">高</view>
          <view class="k">
            <u--input
                border="surround"
                v-model="volume.height"
                placeholder="cm"
                type="number"
                :customStyle="{'height': '30rpx', 'width': '45rpx', 'background': 'white'}"
            ></u--input>
          </view>
        </view>
      </view>
    </view>
    <!-- 确定 -->
    <view class="btn">
      <view>
        <u-button type="primary" text="确定" shape="circle" @click="save"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      nameList: [
          '日用百货',
          '电子产品',
          '食品药品',
          '贵重饰品',
          '易碎品',
          '其他',
      ],
      product: '',
      quantity: 1,
      weight: 1,
      volume: {
        length: '',
        width: '',
        height: '',
      }
    }
  },
  methods: {
    selectProduct(item) {
      this.product = item
    },
    save() {
      let params = this.$store.getters['Express/params']
      if (!params) {
        params = {}
      }
      params.product = {
        name: this.product,
        quantity: this.quantity,
        weight: this.weight,
        volume: this.volume
      }
      console.log(params)
      this.$store.dispatch('Express/set_params', params).then(() => {
        uni.navigateBack()
      })
    }
  },
  onLoad() {
    // 默认选择第1个
    this.product = this.nameList[0]
  }
}
</script>

<style scoped lang="scss">
.express-product {
  background: #f3f5f7;
  padding: 20rpx;
  min-height: 100vh;
  font-size: 24rpx;
  .product, .quantity, .weight, .volume {
    margin-bottom: 20rpx;
    padding: 20rpx;
    background: white;
    border-radius: 10rpx;
  }
  .color {
    color: red;
    border: 1rpx solid red;
    border-radius: 30rpx;
    background: white;
    padding: 3rpx 10rpx;
    width: 45rpx;
    height: 26rpx;
    line-height: 26rpx;
    //display: inline-block;
    font-size: 20rpx;
    text-align: center;
  }
  .title {
    font-size: 28rpx;
    font-weight: 700;
  }
  .btn {
    display: flex;
    justify-content: center;
    view {
      width: 200rpx;
    }
  }
  .product {
    .name {
      display: flex;
      height: 30px;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        .title {
          margin-right: 10px;
        }
        .title_sub {
        }
      }
      .value {
        font-weight: 700;
        margin-right: 10px;
      }
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        width: 32%;
        height: 35px;
        line-height: 35px;
        background: #f3f5f7;
        text-align: center;
        margin-bottom: 10px;
        border-radius: 10rpx;
        &.active {
          color: white;
          background: $main_color;
        }
      }
    }
  }
  .quantity {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      align-items: center;
      .title {
        padding-right: 10px;
      }
    }
    .value {
      flex: 0.9;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .k {
        width: 120rpx;
      }
      .text {
        color: #333333;
        width: 30rpx;
        margin-left: 10px;
      }
      .x {
        flex: 1;
        background: red;
      }
    }
  }
  .weight {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      .title {
        padding-right: 10px;
      }
    }
    .value {
      flex: 0.9;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .k {
        width: 120rpx;
      }
      .text {
        color: #333333;
        width: 30rpx;
        margin-left: 10px;
      }
      .x {
        flex: 1;
        background: red;
      }
    }
  }
  .volume {
    .left {
      display: flex;
      align-items: center;
      .title {
        height: 30px;
      }
      .title_sub {
        color: #666666;
        margin-left: 10px;
      }
    }
    .property {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 0;
      .col {
        display: flex;
        align-items: center;
        .text {
          margin-right: 10px;
        }
      }
      .x {
        font-size: 30rpx;
        color: #333333;
      }
    }
  }
}
</style>
